<template>
  <div class="bigbox">
    <div class="header">
      <my-header></my-header>
    </div>

    <div class="main" ref="main" @scroll="scrollTop">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <swipe></swipe>
        <!-- 轮播图 -->
        <div class="top10">
          <grid-f></grid-f>
        </div>
        <!-- 选项 -->
        <div class="top10">
          <count-down></count-down>
        </div>
        <!-- 倒计时 -->
        <div class="top10">
          <sec-kill></sec-kill>
        </div>
        <!-- 秒杀数据 -->
        <div class="top10">
          <my-goods :list="list" :count="counts" @mydata="mycount"></my-goods>
          <!-- 自定义事件进行子传父操作 -->
        </div>
        <!-- 列表项 -->
      </van-pull-refresh>
      <div class="top" v-if="scrollTopData > 800" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import { getMyGoods } from "../api/home"; //从接口文档引入接口
import MyHeader from "../components/Home/MyHeader.vue";
import GridF from "../components/Home/GridF.vue";
import Swipe from "../components/Home/Swipe.vue";
import SecKill from "../components/Home/SecKill.vue";
import CountDown from "../components/Home/CountDown.vue";
import MyGoods from "../components/Home/MyGoods.vue";
import Vue from "vue";
import { PullRefresh, Toast } from "vant";
Vue.use(PullRefresh);

export default {
  data() {
    return {
      list: [],
      isLoading: false,
      scrollTopData: 0,
      timer: null,
      counts: 2, //默认刚开始显示第二页的数据  将值传给子MyGoods
    };
  },
  name: "Home",
  components: { MyHeader, GridF, Swipe, SecKill, CountDown, MyGoods },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        getMyGoods({ count: 1, limitNum: 10 }).then((data) => {
          //使用引入的借口
          // console.log(data.data.data);
          this.list = data.data.data;
          this.counts = 2; //当触发下拉事件时，让this.counts为2，这样就可以按正常顺序刷新列表项
          // console.log(this.list);
        });
      }, 1000);
    },
    mycount(val) {
      //接收到子传回来的值
      // console.log(val);
      this.counts = val + 1; //对子传回来的值进行修改后，再传给子
      // console.log(this.counts);
    },
    scrollTop() {
      this.scrollTopData = this.$refs.main.scrollTop;
    },
    backTop() {
      // this.$refs.main.scrollTop = 0;
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 10);
    },
  },
};
</script>

<style scoped>
.top10 {
  margin-top: 0.1rem;
  background-color: white;
}
.top {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
</style>
